<template>
	<view class="detailContainer">
		<view class="content_title">
			<view class="content_title_top">
				<view class="title">{{title}}</view>
				<u-tag :text="state > currentIndex ? '已完成' : projectInfo.isTimeout ? '已超时' : '进行中'" size='small' :type="state > currentIndex ? 'success' : projectInfo.isTimeout ? 'error' : 'primary'"></u-tag>
			</view>
			<view class="time">{{form.createTime}}</view>
		</view>
		<view>
			<u-form :model="form" ref="uForm" label-position="top">
				<u-form-item label="是否评估" :required="true">
					<u-radio-group v-model="form.radio0" v-if="!isHide">
						<u-radio v-for="(item, index) in list1" :key="index" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
					<view v-if="isHide">{{form.radio0}}</view>
				</u-form-item>
				<u-form-item label="有无专家" :required="true">
					<u-radio-group v-model="form.radio1" v-if="!isHide">
						<u-radio v-for="(item, index) in list2" :key="index" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
					<view v-if="isHide">{{form.radio1}}</view>
				</u-form-item>
				<u-form-item label="评估年度" :border-bottom="false" :required="true">
					<u-picker mode="time" v-model="timeShow" :params="params" @confirm="ensureTime"></u-picker>
					<u-button @click="getTime" :hair-line="false" :disabled='isHide' :custom-style="{
								position: 'relative',
								backgroundColor:'#f2f3f5',
								borderRadius: '5px',
								padding:'5px 10px',
								margin: '0',
								border:'0px solid #ffffff',
							}">
						{{form.input0 ? form.input0 : '请选择'}}
						<u-icon name="calendar-fill" size="40" style="position: absolute;right: 5%;"></u-icon>
					</u-button>
					
				</u-form-item>
				<u-form-item label="评估单位" :border-bottom="false" :required="true">
					<u-input v-model="form.input1" type="text" :disabled='isHide' :custom-style="{
									width:'50vw',
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
				</u-form-item>
				<u-form-item label="参与人员" label-position="top" :required="true">
					<view style="overflow: hidden;" class="leaderContainer">
						<u-tag v-for="(item,index) in principal" :key='index' :text='item' type='info' color='#000'></u-tag>
						<u-button type="primary" :disabled='isHide' :custom-style="{
								width:'60px',
								borderRadius: '5px',
								padding:'5px 10px',
								margin: '0',
								border:'0px solid #ffffff',
								float:'right'
							}"
						 @click="modalShow = true">
							<u-icon name="plus"></u-icon>
							<view>添加</view>
						</u-button>
					</view>
				</u-form-item>
				<u-form-item label="评估结果" :border-bottom="false" :required="true">
					<u-input v-model="form.input3" type="textarea" :disabled='isHide' :custom-style="{
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
				</u-form-item>
			</u-form>
			<u-modal v-model="modalShow" title="请输入参与人员" :show-cancel-button='true' @confirm='confirmLeader'>
				<u-input :boder='true' v-model='name' :custom-style="{
							margin:'0 31px'
						}"></u-input>
			</u-modal>
			<u-button :ripple="true" :hair-line="false" :custom-style="{
						backgroundColor: '#5c77ff',
						color:'#ffffff',
						margin:'20px 0',
						fontSize:'18px',
						padding:'5px 0',
						boxSizing:'content-box',
					}"
			 @click="submit"
			 v-if='!isHide'>
				提交
			</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		name: "Poject_tj_item",
		props: ['title', 'projectInfo','state', 'currentIndex'],
		data() {
			return {
				timeShow: false,
				isHide:false,
				principal:[],
				name:'',
				modalShow:false,
				form: {
					"input0": '',
					"input1": "",
					"input2": "",
					"input3": "",
					"projectId": 0,
					"radio0": '是',
					"radio1": '有'
				},
				params: {
					year: true,
					month: false,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				list1: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					},
				],
				list2: [{
						name: '有',
						disabled: false
					},
					{
						name: '无',
						disabled: false
					},
				],
			}
		},
		mounted(){
			this.getProjectInfo()
		},
		methods: {
			getProjectInfo(){
				this.$ajax({
					url: `/5/wx/stage/${this.projectInfo.id}`,
					method: 'GET',
					success: (res) => {
						if (res.data.state == 200 && res.data.data.length != 0) {
							this.form = res.data.data[0]
							this.principal = this.form.input2.split('|')
							this.form.radio0 = this.form.radio0 ? '是' : '否'
							this.form.radio1 = this.form.radio1 ? '有' : '无'
							this.isHide = true
						}
					},
					complete: () => {
				
					},
				});
			},
			getTime(){
				this.timeShow = true
			},
			ensureTime(data){
				this.form.input0 = data.year +  '年度'
			},
			confirmLeader() {
				if (this.name) {
					this.principal.push(this.name)
					this.name = ''
				}
			},
			submit(){
				this.form.input2 = this.principal.join('|')
				this.form.projectId = this.projectInfo.id
				this.form.radio0 = this.form.radio0 == '是'
				this.form.radio1 = this.form.radio1 == '有'
				this.$ajax({
					url: '/5/wx/stage',
					method: 'POST',
					data: this.form,
					success: (res) => {
						if (res.data.state == 200) {
							this.$refs.uToast.show({
								title: '提交成功',
								type: 'success',
							})
						}
						this.$ajax({
							url: `/5/wx/stage/complete/${this.projectInfo.id}`,
							method: 'PUT',
							success: (res) => {
								this.getProjectInfo()
							},
							complete: () => {
						
							},
						});
					},
					complete: () => {
				
					},
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detailContainer {
		background-color: #fff;
		width: 100%;
		padding: 0 15px;
	}

	.content_title {
		.content_title_top {
			display: flex;
			align-items: center;

			.title {
				font-size: 18px;
				margin-right: 10px;
				font-weight: bold;
			}
		}

		.time {
			color: #BFC0C2;
			margin-top: 4px;
		}
	}
	.leaderContainer {
		>u-tag {
			margin-right: 4px;
	
			/deep/ .u-tag {
				height: 30px;
				font-size: 15px;
			}
		}
	}
</style>
